<div ng-controller="ProgressCtrl as vm">
    <section class="content-header">
        <!-- Content Header (Page header) -->
        Report Submission Check List
            <div class="pull-right">
                        <form class="form-inline">
                          <div class="form-group">
                            <select class="form-control" ng-options="div for div in years track by div" ng-model="vm.year" ng-change="vm.loadData()">
                      </select>
                          </div>
                          <div class="form-group">
                            <select class="form-control" ng-options="div for div in months track by div" ng-model="vm.month" ng-change="vm.loadData()">
                      </select>
                          </div>
                          
                        </form>
                       
                      
                    </div>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Summary</h3>
                        <div class="pull-right">
                        </div>
                    </div>
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover table-bordered table-condensed">
                            <tr>
                                <th>Sub-Region</th>
                                <th>Total</th>
                                <th>Submission</th>
                                <th>Percentage</th>
                            </tr>
                            <tr ng-repeat="ret in vm.summary">
                                <td>{{ret.name}}</td>
                                <td>{{ret.hotelNo}}</td>
                                <td>{{ret.count}}</td>
                                <td>{{ret.submitRate*100 | percentage}}</td>
                            </tr>
                            <tr>
                                <th>Total</th>
                                <th>{{vm.total.total}}</th>
                                <th>{{vm.total.submision}}</th>
                                <th>{{vm.total.submision/vm.total.total*100 | percentage}}</th>
                            </tr>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Hotel List</h3>
                        <div class="pull-right">
                        </div>
                    </div>
                    <div class="box-body table-responsive no-padding">
                        <table ng-table="vm.tableParams" class="table table-hover table-bordered table-condensed" show-filter="true">
                            <tr ng-repeat="ret in $data">
                                <td width="15%" title="'Region'" filter="{ 'region': 'text'}" sortable="'region'">
                                    {{ret.region}}</td>
                                <td width="15%" title="'Cluster'" filter="{ 'cluster': 'text'}" sortable="'cluster'">
                                    {{ret.cluster}}</td>
                                <td width="20%" title="'Hotel Name'" filter="{ name: 'text'}" sortable="'name'">
                                    {{ret.name}}</td>
                                <td width="40%" title="'Progress'">
                                    <div class="progress progress-xs progress-striped active">
                                        <div class="progress-bar progress-bar-warning" style="{{vm.progressNoStyle(ret.allprogress)}}"></div>
                                    </div>
                                    <span>{{ret.allprogress*100 | percentage}}</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
    </section>
</div>
    